<template>
  <div
    class="distribution-withdraw-cash-set gray-box top-redius border-bottom-gray"
  >
    <div class="title">{{ $t("distribution.withdrawalSettings") }}</div>
    <el-form
      ref="dataForm"
      :label-width="this.$i18n.t('language') === 'language' ? '160px' : '70px'"
      size="mini"
      class="set-form"
      label-position="left"
      :model="dataForm"
    >
      <!-- <el-form-item label="结算时间">
        <el-radio-group v-model="dataForm.settlementTime">
          <el-radio :label='0'>交易完成后结算佣金</el-radio>
          <el-radio :label='1'>售后维权处理期结束后，再结算佣金</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="结算方式">
        <el-radio-group v-model="dataForm.settlementMode">
          <el-radio :label='0'>系统结算</el-radio>
          <el-radio :label='1'>人工结算</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="提现设置">
        <el-radio-group v-model="dataForm.settlementAutoSet">
          <el-radio :label='0'>自动提现，每完成一笔订单，立即发送红包</el-radio>
          <el-radio :label='1'>用户手动发起提现</el-radio>
        </el-radio-group>
      </el-form-item>-->

      <!-- <el-form-item label="打款方式">
        <el-radio-group v-model="dataForm.modeOfPayment">
          <el-radio :label='0'>微信红包</el-radio>
          <el-radio :label='1'>企业付款到微信零钱</el-radio>
        </el-radio-group>
      </el-form-item>-->

      <el-form-item :label="$t('withdraw.eachWithdrawal')">
        <span class="input-tips">{{ $t("withdraw.tip1") }}</span>
        <el-input v-model.number="dataForm.amountMin" style="width: 180px" oninput="value=value.replace(/[^\d]/g,'')" maxlength="10">
          <template slot="append">{{ $t("coupon.yuan") }}</template>
        </el-input>

        <span class="input-tips">,{{ $t("withdraw.tip2") }}</span>
        <el-input v-model.number="dataForm.amountMax" style="width: 180px" oninput="value=value.replace(/[^\d]/g,'')" maxlength="10">
          <template slot="append">{{ $t("coupon.yuan") }}</template>
        </el-input>
        <span class="tips">{{ $t("withdraw.tip3") }}</span>
      </el-form-item>

      <el-form-item :label="$t('withdraw.withdrawalFrequency')">
        <el-select
          v-model="dataForm.frequency"
          :placeholder="$t('tip.select')"
          style="display: inline-black"
        >
          <el-option :label="$t('withdraw.everyDay')" :value="1"></el-option>
          <el-option :label="$t('withdraw.weekly')" :value="7"></el-option>
          <el-option :label="$t('withdraw.monthly')" :value="30"></el-option>
          <el-option :label="$t('withdraw.unlimited')" :value="-1"></el-option>
        </el-select>

        <el-input
          v-model.number="dataForm.number"
          style="width: 180px; display: inline-black"
          oninput="value=value.replace(/[^\d]/g,'')" maxlength="10"
          v-if="dataForm.frequency !== -1"
        >
          <template slot="append">{{ $t("distribution.bcTip4") }}</template>
        </el-input>
      </el-form-item>

      <el-form-item :label="$t('withdraw.withdrawalInstructions')">
        <el-input
          type="textarea"
          style="width: 300px"
          v-model="dataForm.paymentExplain"
          witdt="230"
          maxlength="50" show-word-limit
        ></el-input>
        <br />
        <span class="tips">{{ $t("withdraw.tip4") }}</span>
      </el-form-item>
    </el-form>
    <el-button @click="dataFormSubmit()">{{
      $t("distribution.save")
    }}</el-button>
  </div>
</template>

<script>
export default {
  components: {

  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据
    getData () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/distributionWithdrawCashSet/info'),
        method: 'get'
      }).then(({ data }) => {
        if (data) {
          this.setDate(data)
        }
        this.dataListLoading = false
      })
    },
    message (msg, type) {
      this.$message({
        message: msg,
        type: type,
        duration: 1500
      })
    },
    // 设置数据
    setDate (data) {
      this.dataForm = data
    },
    checkConfig () {
      if (this.dataForm.amountMin <= 0) {
        this.message(this.$i18n.t('withdraw.errotTip1'), 'error')
        return false
      }
      if (this.dataForm.amountMax <= 0 || this.dataForm.amountMax <= this.dataForm.amountMin) {
        this.message(this.$i18n.t('withdraw.errorTip2'), 'error')
        return false
      }
      if (this.dataForm.number <= 0) {
        this.message(this.$i18n.t('withdraw.errorTip3'), 'error')
        return false
      }
      if (this.dataForm.paymentExplain == null || this.dataForm.paymentExplain === '') {
        this.message(this.$i18n.t('withdraw.errorTip4'), 'error')
        return false
      }
      return true
    },
    maxNumber () {
      if (this.dataForm.number > 99999) {
        this.dataForm.number = 99999
      }
    },
    // 提交表单
    dataFormSubmit () {
      if (!this.checkConfig()) {
        return
      }
      let param = this.dataForm
      if (param) {
        if (parseFloat(param.amountMin) < 1) {
          this.$message.error(this.$i18n.t('withdraw.errorTip5'))
          return
        }
        if (parseFloat(param.amountMin) >= parseFloat(param.amountMax)) {
          this.$message.error(this.$i18n.t('withdraw.errorTip6'))
          return
        }
        if (parseFloat(param.amountMax) >= 20000) {
          this.$message.error(this.$i18n.t('withdraw.errorTip7'))
          return
        }
        if (parseFloat(param.number) < 0) {
          this.$message.error(this.$i18n.t('withdraw.errorTip8'))
          return
        }
      }
      this.$http({
        url: this.$http.adornUrl(`/platform/distributionWithdrawCashSet`),
        method: 'put',
        data: this.$http.adornData(param)
      }).then(({ data }) => {
        this.$message({
          message: this.$i18n.t('publics.operation'),
          type: 'success',
          duration: 1500
        })
      }).catch(() => {

      })
    }
  },
  data () {
    return {
      addOrUpdateVisible: false,
      dataForm: {
        'settlementTime': 0,
        'settlementMode': 0,
        'settlementAutoSet': 0,
        'frequency': 1,
        'amountMax': 0,
        'amountMin': 0,
        'paymentExplain': '',
        'modeOfPayment': 0
      },
      rules: {

      }
    }
  }
}
</script>
<style lang="scss">
.distribution-withdraw-cash-set {
  .input-tips {
    font-size: 12px;
  }
  .frequency {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}
</style>
